<script setup lang="ts">
import { ref, onMounted } from 'vue'

import Role from './components/Role.vue'

const activeMenu = ref('role')

onMounted(() => {})
</script>
<template>
  <div class="setting-page">
    <el-card>
      <el-tabs v-model="activeMenu" class="demo-tabs">
        <el-tab-pane label="角色管理" name="role">
          <Role />
        </el-tab-pane>
        <el-tab-pane label="公司设置" name="setting">
          <div class="company-settings"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.setting-page {
  padding: 15px;
  :deep(.el-card) {
    padding: 20px;
    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-wrap {
          .el-tabs__nav-scroll {
            .el-tabs__nav {
              .el-tabs__item {
                font-size: 18px;
                padding: 0 25px;
              }
              .el-tabs__active-bar {
                width: 122px !important;
                left: -25px;
              }
            }
          }
        }
      }

      .company-settings {
        padding: 20px;
      }
    }
  }
}
</style>
